{% extends 'dict/base.html' %}
{% block title %}编辑单词{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-auto">
            <input class="form-check-input" type="radio" name="grade" id="g" value="0">
            <label class="form-check-label" for="g">
                全部
            </label>
        </div>
        <div class="col-auto">
            <input class="form-check-input" type="radio" name="grade" id="g1" value="1" checked>
            <label class="form-check-label" for="g1">
                高一
            </label>
        </div>
        <div class="col-auto">
            <input class="form-check-input" type="radio" name="grade" id="g2" value="2">
            <label class="form-check-label" for="g2">
                高二
            </label>
        </div>
    </div>
    {#    过滤#}
    <div class="row">
        <div class="form-check col-auto">
            <label for="filter-value">单词</label>
            <input id="filter-value" type="text" placeholder="过滤词">
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="myGrid" style="height: 600px"><!--表格 --></div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $('document').ready(function () {
            let table;
            table = new Tabulator('#myGrid', {
                data: [],
                columns: [
                    {title: '索引', field: 'id'},
                    {title: '单词', field: '单词', width: 100},
                    {title: '发音', field: '发音'},
                    {title: '意思', field: '意思'},
                    {
                        title: '年级', field: '年级', editor: 'select', editorParams: {
                            values: {'1': '1', '2': '2', '3': '3'}
                        },
                    },
                    {title: '技巧', field: '技巧', editor: 'textarea'},
                ],
                pagination: "local",
                paginationSize: 16,
                layout: "fitDataStretch",
                maxHeight: '100%',
                // cell edited callback
                cellEdited: function (cell) {
                    console.log(cell.getData());
                    $.post(
                        '{% url "dict:update_word" %}',
                        cell.getData(),
                        function (data) {
                            console.log(data);
                        }
                    );
                },
            });
            // 默认 高一
            $.post(
                '{% url "dict:index" %}',
                {'grade': $('input:radio:checked').val()},
                function (data) {
                    table.replaceData(data);
                }
            );

            // 过滤条件变化
            $('#filter-value').keyup(function () {
                let value = $('#filter-value').val();
                if (value)
                    table.setFilter('单词', '=', value);
                else
                    table.clearFilter();
            });

            // 年级 radio
            $('input[type=radio][name=grade]').change(function () {
                let value = this.value;
                // console.log(value);
                table.clearFilter();
                table.setFilter('年级', '=', value);
            });
        });
    </script>
{% endblock %}